import {Avatar, Button, Card, Descriptions, Image, List, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess, renderText} from "@/utils/utils";
import {MobileDemandManager, OpCaseManage} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import 'braft-editor/dist/index.css'
import {caseAudit} from "@/pages/custom/case/list";

const CaseDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [record, setRecord] = useState<any>(undefined)
  const [auditLogs, setAuditLogs] = useState<any[]>([])

  const queryRecordDetail = (sid: number) => {
    if (sid) {
      OpCaseManage.casesDetail(sid).then(({code, data}) => {
        if (isSuccess(code)) {
          setRecord(data)
        }
      })
      MobileDemandManager.demandAuditLog(sid).then(({code, data}) => {
        if (isSuccess(code)) {
          setAuditLogs(data??[])
        }
      })
    }
  }

  useEffect(() => queryRecordDetail(id), [id])

  return (
    <PageContainer>
      <Card bordered={false}
            actions={record?.demandStatus === 'AUDITING' ? [<span></span>, <span></span>,
              <span style={{float: 'right', paddingRight: 17}}>
                <Button style={{marginRight: 17}}
                        onClick={() => caseAudit({
                          auditOperate: SYS_ENUMS.RESOURCE_AUDIT_STATE.REFUSE.value,
                          remark: '【详情快捷驳回】',
                        }, record, () => queryRecordDetail(id))}>驳回</Button>
                <Button type='primary'
                        onClick={() => caseAudit({
                          auditOperate: SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value,
                          remark: '【详情快捷通过】',
                        }, record, () => queryRecordDetail(id))}>通过</Button>
              </span>] : []}>
        <Tabs destroyInactiveTabPane={true}>
          <Tabs.TabPane forceRender tab='案例信息' key="CASE_BASIC_INFO">
            <Descriptions title="基本信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="案例ID">{id}</Descriptions.Item>
              <Descriptions.Item label="案例标题">{record?.title}</Descriptions.Item>
              <Descriptions.Item
                label="审核状态">{renderText(SYS_ENUMS.RESOURCE_AUDIT_STATE[record?.auditState]?.label)}</Descriptions.Item>
              <Descriptions.Item label="设计师">{record?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="设计师等级">{record?.worksNature}</Descriptions.Item>
              <Descriptions.Item label="服务客户">{record?.serveCustomers}</Descriptions.Item>
              <Descriptions.Item label="案例价格"><span style={{color:'red'}}>{record?.casePrice}</span></Descriptions.Item>
              <Descriptions.Item
                label="设计工具">{renderText(SYS_ENUMS.DESIGN_TOOL[record?.designTools]?.label)}</Descriptions.Item>
              <Descriptions.Item label="案例标签">
                {
                  record?.labelList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)
                }
              </Descriptions.Item>
              <Descriptions.Item label="编辑时间">{record?.gmtModified}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{record?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="数据统计" style={{marginBottom: 32}}>
              <Descriptions.Item label="浏览量">{record?.browseNum}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{record?.greatNum}</Descriptions.Item>
              <Descriptions.Item label="评论数量">{record?.replyNum}</Descriptions.Item>
              <Descriptions.Item label="收藏数量">{record?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="分享数量">{record?.shareNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="详细内容" style={{marginBottom: 32}} column={1}>
              <Descriptions.Item label="内容">{record?.description}</Descriptions.Item>
              <Descriptions.Item label="封面">
                {record?.cover && <Image src={record?.cover?.url} title={record?.name} width='66%'/>}
              </Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='审核日志' key="CASE_AUDIT_LOG">
            <List
              itemLayout="horizontal"
              dataSource={auditLogs}
              renderItem={({userDto, gmtCreate, auditRemark, type}) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={userDto?.avatarUrl}/>}
                  title={userDto?.nickName}
                  description={`备注: ${auditRemark ?? '暂无'}`}
                />
                <div>{`${SYS_ENUMS.OPERATE_TYPE[type]?.label}   ${gmtCreate} `}</div>
              </List.Item>}
            />
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default CaseDetail;
